<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{	
				margin: 0;		/*初始化body*/
				padding: 0;
			}
			#box{	/* 定义整个内容为box*/
				width: 100%;
				height: 600px;
				display: flex;		/* 弹性布局：方便调整大小*/
				justify-content: center;	/* 水平:居中*/
				align-items: center;		/* 垂直:居中*/
			}
			#outcont{	/* 定义溢出的内容并遮盖住*/
				width: 600px;
				height: 100px;
				display: flex;
				align-items: center;
				overflow: hidden;	/* 溢出:隐藏*/
				border: 2px solid #777777;
			}
			#imgs{
				display: flex;
				width: 1600px;	/* 总宽度*/
				height: 100px;
			}
			#imgs img{	/* 调整图片大小*/
				height: 100px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="outcont">
				<div id="imgs">
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
					<img src="img/6.jpeg" >
					<img src="img/7.jpeg" >
					<img src="img/8.jpeg" >
					<img src="img/9.jpeg" >
					<img src="img/10.jpeg" >
					<img src="img/1.jpeg" >
					<img src="img/2.jpeg" >
					<img src="img/3.jpeg" >
					<img src="img/4.jpeg" >
					<img src="img/5.jpeg" >
				</div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript" charset="utf-8">
		/* 定义变量提取ID*/
		var ImgObj = document.getElementById('imgs');
		/* 定义全局变量并初始化*/
		var MarginLeft = 0;
		/* onload页面加载之后立刻执行*/
		onload = function(){
			setInterval(function(){
				MarginLeft --;	
				ImgObj.style.marginLeft = MarginLeft+'px';
				if (MarginLeft == -1000) {
					MarginLeft = 0;
				}
			},10)
		}
	
	</script>
</html>
